<template>
	<view style="margin: 0 50rpx 0;">
		<view class="logo-content">
			<image src="/static/login/login_logo.png" mode="" class="logo"></image>
		</view>
		<view>
			<view class="phone">
				<view class="title">手机号</view>
				<input class="uni-input" v-model="form.mobile" type="number" placeholder="请输入手机号"/>
				<view class="clear" @click="clear('mobile')" v-show='form.mobile !=="" '>×</view>
			</view>
		</view>
		<view style="height: 1px;background-color: #e6e6e6;"></view>
		
		<view v-show="passwordLogin">
			<view class="phone password">
				<view class="title">密码</view>
				<input class="uni-input" v-model="form.password" password type="text" placeholder="请输入密码" />
				<view class="clear" @click="clear('password')" v-show='form.password !=="" '>×</view>
			</view>
		</view>
		
		<view v-show="codeLogin">
			<view class="phone password">
				<view class="title">短信验证码</view>
				<input class="uni-input" v-model="form.code" password type="text" placeholder="请输入验证码" />
				<!-- <view class="clear" @click="clear('password')" v-show='form.password !=="" '>×</view> -->
				<button class="mini-btn sendCode" size="mini" plain style="" :disabled='form.mobile=== ""|| disabled' @click='sendCode'>{{btntxt}}</button>
			</view>
		</view>
		
		<view style="height: 1px;background-color: #e6e6e6;"></view>
		
		<view v-show="passwordLogin">
			<view class="phone password switchover" style="width: 650rpx;">
				<text style="display: flex;flex: 1;" @click="codeLoginChange">验证码登入</text>
				<text @click="forgetPassword">忘记密码</text>
			</view>
		</view>
		
		<view v-show="codeLogin">
			<view class="phone password switchover">
				<text style="display: flex;flex: 1;" @click="passwordLoginChange">密码登入</text>
				<text @click="forgetPassword">忘记密码</text>
			</view>
		</view>
		
		<!-- 登入注册按钮 -->
		<view class="btn">
			<view class="enter" @click="loginIn">登入</view>
			<view class="register" @click="register">注册</view>
		</view>
		
		<!-- 微信登入 -->
		<view class="wx-login">
			<image src="/static/login/weixin.png" mode="" @click="wxLogin"></image>
			<view @click="wxLogin">微信登入</view>
		</view>
		
		<!-- 协议 -->
		<view class="agreement">
			<text>我已阅读并同意</text>
			<text>《注册会员服务条款》</text>
		</view>
	</view>
</template>

<script>
	import { login } from '../../api/index.js'
	export default {
		data() {
			return {
				passwordLogin: true, // 密码登入
				codeLogin: false, // 验证码登入
				disabled: false, // 发送验证码是否禁用
				btntxt: '发送验证码',
				time: 0, // 60s定时器
				form: {
					mobile: '',
					password: '',
					code: ''
				},
			}
		},
		methods: {
			// 手机号和密码清除
			clear(data) {
				if (data === 'mobile') {
					this.form.mobile = ''
				} else if (data === 'password') {
					this.form.password = ''
				}
			},
			// 验证码登入
			codeLoginChange() {
				this.passwordLogin = false
				this.codeLogin = true
				this.form.password = ''
			},
			//密码登入
			passwordLoginChange() {
				this.passwordLogin = true
				this.codeLogin = false
				this.form.code = ''
			},
			// 发送验证码
			sendCode() {
				let reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
				if (this.form.mobile == '') {
				   uni.showToast({
		   　　　　　　 title: "请输入手机号码",
		   　　　　　　 icon: 'none'
		   　　　　 })
					return false
				}else if(!reg.test(this.form.mobile)){
					uni.showToast({
			　　　　　　 title: "手机号格式不正确",
			　　　　　　 icon: 'none'
			　　　　 })
					return false
				}else{
					this.time = 60;
					this.disabled = true;
					this.timer();
					// 这里发送验证码请求
			   }
			},
			timer() {
				if (this.time > 0) {
					 this.time--;
					 this.btntxt = this.time+"s后重新获取";
					 setTimeout(this.timer, 1000);
				} else{
					 this.time=0;
					 this.btntxt = "发送验证码";
					 this.disabled = false;
				}
			},
			// 点击登入
			loginIn() {
				console.log('登入')
				let data = { ...this.form }
				console.log(data)
				if (data.code == '') {
					// 发送密码登入的请求
					delete data.code
					console.log(data)
					login(data, (res) => {
						console.log("登入成功")
						console.log(res)
						if (res.data.code != 0) {
							uni.showToast({
							    title: res.data.message,
							    icon: 'none'
							});
						} else {
							uni.setStorage({
							    key: 'userInfo',
							    data: res.data.data,
							    success: () => {
							        console.log('设置成功');
									uni.switchTab({
										url: '/pages/index/index',
										// success: (e) => {
										// 	let page = getCurrentPages().pop();
										// 	console.log(page)
										// 	if (page == undefined || page == null) return;
										//     page.onLoad();
										// }
									})
							    }
							});
						}
						
					})
				} else if (data.password == '') {
					// 发送验证码登入请求
					delete data.password
					console.log(data)
					login(data, (res) => {
						console.log("登入成功")
						console.log(res)
						if (res.data.code != 0) {
							uni.showToast({
							    title: res.data.message,
							    icon: 'none'
							});
						} else {
							uni.setStorage({
							    key: 'userInfo',
							    data: res.data.data,
							    success: () => {
							        console.log('设置成功');
									uni.switchTab({
										url: '/pages/index/index',
										// success: (e) => {
										//     let page = getCurrentPages().pop();
										// 	console.log(page)
										//     if (page == undefined || page == null) return;
										//     page.onLoad();
										// }
									})
							    }
							});
						}
						
					})
				}
			},
			// 注册按钮
			register() {
				console.log('注册')
				uni.navigateTo({
					url: '/pages/public/register'
				})
			},
			// 忘记密码
			forgetPassword() {
				uni.navigateTo({
					url: '/pages/public/forgetPassword'
				})
			},
			wxLogin() {
				// uni.request({
				//     url: '/api/activity/visitor/auth',
				// 	method: 'GET',
				//     data: {},
				//     success: (res) => {
				//         console.log(res)
				//     },
				// 	fail: (err) => {
				// 		console.log(err)
				// 	}
				// })
				window.location.href = 'https://mobile.laiba.shop/activity/visitor/auth?url=https://api.laiba.shop/html/'
			}
		}
	}
</script>

<style lang='scss'>
	uni-page {
	    /* display: block;
	    width: 100%; */
	    /* height: 100% !important; */
	}
	.logo-content {
		width: 100%;
		height: 250rpx;
		background-color: #fff;
		text-align: center;
		line-height: 250rpx;
		padding-top: 40rpx;
		.logo {
			width: 408rpx;
			height: 70rpx;
		}
	}
	.phone {
		display: flex;
		height: 108rpx;
		align-items: center;
		.title {
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #989898;
			width: 180rpx;
		}
		input {
			color: #1a1a1a;
			font-size: 30rpx;
			padding-left: 20rpx;
			display: flex;
			flex: 1;
		}
		.clear {
			width: 32rpx;
			height: 32rpx;
			background-color: #ccc;
			border-radius: 50%;
			text-align: center;
			line-height: 30rpx;
			color: #fff;
			font-size: 24rpx;
		}
	}
	.switchover {
		display: flex;
		font-size: 26rpx;
		color: #f98b05;
	}
	.btn {
		margin-top: 30rpx;
		.enter {
			height: 90rpx;
			background-image: linear-gradient(-90deg, 
					#fe8700 0%, 
					#ff9e2c 100%), 
				linear-gradient(-89deg, 
					#e95783 0%, 
					#fe93a3 100%), 
				linear-gradient(
					#cb9e5f, 
					#cb9e5f);
			border-radius: 45rpx;
			color: #fff;
			border: none;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium;
		}
		.enter:active,.register:active {
			opacity: 0.9;
		}
		.register {
			height: 90rpx;	
			margin-top: 20rpx;
			border: none;
			text-align: center;
			line-height: 90rpx;
			color: #999;
			font-size: 30rpx;
		}
	}
	.wx-login {
		margin-top: 80rpx;
		text-align: center;
		image {
			width: 86rpx;
			height: 86rpx;
		}
		view {
			font-size: 22rpx;
			color: #999;
			padding-left: 4rpx;
		}
	}
	.agreement {
		margin-top: 100rpx;
		text-align: center;
		font-size: 24rpx;
		text:nth-child(1) {
			color: #999;
		}
		text:nth-child(2) {
			color: #666;
		}
	}
	.sendCode {
		line-height: 45rpx;
		height: 50rpx;
		border: 1px solid #3f3f3f;
		color: #3d3d3d;
	}
	/* .sendCode:active {
		opacity: 0.9;
	} */
</style>
